<template>
  <div>
    <div style="display: flex; justify-content: center; margin-top: 200px">
      <div style="display: flex">
        <div>
          <button
            style="
              width: 200px;
              height: 200px;
              margin: 10px;
              background-color: #ccc;
            "
            @click="handleDialog"
          >
            加入公司
          </button>
        </div>
        <div>
          <button
            style="
              width: 200px;
              height: 200px;
              margin: 10px;
              background-color: #ccc;
            "
            @click="handleCreateDialog"
          >
            创建公司
          </button>
        </div>
      </div>
    </div>
    <div>
      <!-- //加入公司对话框 -->
      <el-dialog v-model="state.dialogVisible" title="输入邀请码" width="500">
        <el-input
          v-model="state.form.code"
          label="输入邀请码"
          style="width: 240px"
          placeholder="输入邀请码"
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="state.dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmJoin"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- //创建公司对话框 -->
      <el-dialog
        v-model="state.createDialogVisible"
        title="公司信息"
        width="700"
        style="padding-left: 50px"
      >
        <el-form
          :model="state.formCompany"
          label-position="left"
          label-width="auto"
          style="max-width: 400px"
        >
          <el-form-item label="输入公司名称">
            <el-input v-model="state.formCompany.name" />
          </el-form-item>
          <el-form-item label="选择机构">
            <el-select
              v-model="state.formCompany.industryId"
              placeholder="选择机构"
            >
              <el-option
                v-for="item in state.industry"
                :key="item.industryId"
                :label="item.name"
                :value="item.industryId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="输入公司人数">
            <el-input-number
              v-model="state.formCompany.employeeSize"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="输入公司地址">
            <el-input v-model="state.formCompany.addressName" />
          </el-form-item>
          <el-form-item label="输入公司邮箱">
            <el-input v-model="state.formCompany.email" />
          </el-form-item>
          <el-form-item label="输入公司法人">
            <el-input v-model="state.formCompany.legalRepresentative" />
          </el-form-item>
          <el-form-item label="输入公司电话号码">
            <el-input v-model="state.formCompany.telephone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="state.createDialogVisible = false"
              >取消</el-button
            >
            <el-button type="primary" @click="commitForm"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { joinCompany, getIndustry, createCompany } from "@/api/company";
import { ElMessage } from "element-plus";
defineOptions({
  name: "joinCompany"
});
let state = reactive({
  dialogVisible: false,
  createDialogVisible: false,
  form: {
    code: ""
  },
  formCompany: {
    addressId: null,
    addressName: null,
    createTime: "",
    email: "",
    employeeSize: 0,
    industryId: "",
    industryName: "",
    legalRepresentative: "",
    name: "",
    telephone: ""
  },
  industry: []
});
const handleDialog = () => {
  state.dialogVisible = true;
};
const confirmJoin = async () => {
  const result = await joinCompany(state.form);
  console.log(666);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "加入公司成功"
    });
    state.dialogVisible = false;
  } else {
    ElMessage({
      type: "warning",
      message: "加入公司失败"
    });
  }
};
const handleCreateDialog = () => {
  state.createDialogVisible = true;
};
//提交表单
const commitForm = async () => {
  // console.log(state.formCompany)
  const res = await createCompany(state.formCompany);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "创建公司成功"
    });
    state.createDialogVisible = false;
  } else {
    ElMessage({
      type: "warning",
      message: "创建公司失败！"
    });
  }
  console.log(state.formCompany);
};
onMounted(async () => {
  const res = await getIndustry();
  if (res.code == 200) {
    state.industry = res.data;
  }
});
</script>
